import React from 'react';
import { observer } from 'mobx-react';
import { Layout, Button, Icon, Row, Col, Divider } from 'antd';
const { Content } = Layout;
import HomeState from './index.state';
import style from './index.less';

//字体ICON
import iconfont from '@/app/containers/theme/iconfont/iconfont.less';
//JSON文件
import json from './index.json';
//图片引入
import imgs from '../../../../public/favicon.png';
import data from './index.data';
import service from './index.service';

@observer
class HomePage extends React.Component {
  componentDidMount() {
    console.log(data);
    console.log(service);
  }
  render() {
    console.log(this.props);
    console.log(imgs);
    return (
      <Content className={style.main}>
        <Row type="flex" align="middle" justify="center">
          <Col span={24} align="center">
            <Divider>Mbox</Divider>
            <p></p>
          </Col>
          <Col span={24} align="center">{`${HomeState.todo}`}</Col>
          <Col span={24} align="center">
            <Button onClick={HomeState.setTodo}>点击</Button>
          </Col>
        </Row>
        <Row>
          <Col span={24} align="center">
            <Divider>引入JSON文件</Divider>
          </Col>
          <Col span={24} align="center">
            {json.xxx}
          </Col>
        </Row>
        <Row>
          <Col span={24} align="center">
            <Divider>字体ICON</Divider>
          </Col>
          <Col span={24} align="center">
            <span className={`${iconfont.rmspIcon} ${iconfont['icon-riqi']}`}></span>
          </Col>
        </Row>
        <Row>
          <Col span={24} align="center">
            <Divider>引入 Antd ICON</Divider>
          </Col>
          <Col span={24} align="center">
            <Icon type="star" theme="filled" />
          </Col>
        </Row>
        <Row>
          <Col span={24} align="center">
            <Divider>引入图片</Divider>
          </Col>
          <Col span={24} align="center">
            <img src={imgs} />
          </Col>
        </Row>
      </Content>
    );
  }
}

export default HomePage;
